<template>
  <div>
    <van-button @click="send">在线咨询</van-button>

    <van-dialog v-model="show" title="标题" show-cancel-button>
      <div>
        <ul>
          <li v-for="(i, index) in meslist" :key="index">{{ i }}</li>
        </ul>
      </div>
      <div>
        <van-field v-model="mes" /><van-button @click="submit">发送</van-button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid'
export default {
    data(){
        return{
            show:false,
            mes:'',
            meslist:[],
            id:''
        }
    },
    methods:{
        send(){
            this.show = true
            this.coon()
        },
        conn(){
            this.id = uuid()
            this.ws = new WebSocket("ws://localhost:5000/sockconn?id="+this.id)
            this.ws.onopen=()=>{
                this.ws.send(JSON.stringify({"send":"conn","mes":"conn"}))
            }
            this.ws.onmessage=(res)=>{
                console.log(res)
                var data = JSON.parse(res.data)
                this.meslist.push(data.meslist)
            }
        },
        submit(){
            var mm = this.id + "说" + this.mes
            this.meslist.push(mm)
            this.ws.send(JSON.stringify({"send":"kefu","mes":mm}))
        }
    }
};
</script>

<style>
</style>